<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Actual & Budget 数据导入</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }
        
        .container {
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            height: 100vh;
        }
        
        .main-content {
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .search-filters {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 0;
            margin: 0;
            flex-shrink: 0;
        }
        
        .table-container {
            background-color: white;
            border-radius: 0;
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .data-table {
            width: 100%;
            flex: 1;
        }
        
        .data-table .el-table__body td {
            padding: 4px 0;
        }
        
        .data-table .el-table__header th {
            padding: 8px 0;
        }
        
        .data-table .el-table th {
            background-color: #f5f7fa;
        }
        
        .month-header {
            background-color: #e6f7ff !important;
            color: #1890ff !important;
            text-align: center;
        }
        
        .actual-cell {
            background-color: #f6ffed;
            color: #52c41a;
            text-align: center;
            font-weight: 500;
        }
        
        .budget-cell {
            background-color: #fff7e6;
            color: #fa8c16;
            text-align: center;
            font-weight: 500;
        }
        
        .upload-area {
            border: 2px dashed #d9d9d9;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            background-color: #fafafa;
            transition: border-color 0.3s;
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: #409eff;
        }
        
        .upload-area.dragover {
            border-color: #409eff;
            background-color: #f0f9ff;
        }
        
        .upload-icon {
            font-size: 48px;
            color: #c0c4cc;
            margin-bottom: 10px;
        }
        
        .upload-text {
            color: #606266;
            font-size: 14px;
        }
        
        .upload-hint {
            color: #909399;
            font-size: 12px;
            margin-top: 5px;
        }
        
        .import-dialog .el-dialog__body {
            padding: 10px;
        }
        
        .progress-info {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        
        .fixed-columns {
            position: sticky;
            left: 0;
            background-color: white;
            z-index: 10;
        }

        /* 表格滚动样式 */
        .el-table__body-wrapper {
            overflow-x: auto;
        }
        
        /* 确保月份列的最小宽度 */
        .month-column {
            min-width: 80px;
        }
        
        .action-column {
            min-width: 120px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 主要内容区域 -->
            <div class="main-content">

                
                <!-- 搜索过滤区域 -->
                <div class="search-filters">
                    <el-form :inline="true" size="small">
                        <el-form-item label="年份">
                            <el-select v-model="filters.year" placeholder="选择年份" clearable style="width: 120px;">
                                <el-option v-for="item in yearOptions" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Location">
                            <el-select v-model="filters.location" placeholder="选择Location" clearable style="width: 120px;">
                                <el-option v-for="item in locationOptions" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Division">
                            <el-select v-model="filters.division" placeholder="选择Division" clearable style="width: 120px;">
                                <el-option v-for="item in divisionOptions" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="BU">
                            <el-select v-model="filters.bu" placeholder="选择BU" clearable style="width: 120px;">
                                <el-option v-for="item in buOptions" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Function">
                            <el-select v-model="filters.function" placeholder="选择Function" clearable style="width: 120px;">
                                <el-option v-for="item in functionOptions" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="applyFilters" icon="el-icon-search">搜索</el-button>
                            <el-button @click="resetFilters" icon="el-icon-refresh">重置</el-button>
                            <el-button type="primary" icon="el-icon-upload" @click="showImportDialog" style="margin-left: 20px;">
                                导入数据
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
                
                <!-- 数据表格 -->
                <div class="table-container">
                    <el-table 
                        :data="filteredTableData" 
                        border 
                        class="data-table"
                        :height="tableHeight"
                        v-loading="tableLoading">
                        <!-- 固定列 -->
                        <el-table-column prop="location" label="Location" width="100" fixed="left" align="center"></el-table-column>
                        <el-table-column prop="division" label="Division" width="100" fixed="left" align="center"></el-table-column>
                        <el-table-column prop="bu" label="BU" width="80" fixed="left" align="center"></el-table-column>
                        <el-table-column prop="department" label="Department" width="150" align="center"></el-table-column>
                        <el-table-column prop="function" label="Function" width="150" align="center"></el-table-column>
                        <el-table-column prop="profitCenter" label="Profit Center" width="120" align="center"></el-table-column>
                        <el-table-column prop="costCenter" label="Cost Center" width="120" align="center"></el-table-column>
                        <el-table-column prop="category" label="Category" width="100" align="center"></el-table-column>
                        <el-table-column prop="category1" label="Category1" width="100" align="center"></el-table-column>
                        <el-table-column prop="personelGroup" label="Personnel Group" width="130" align="center"></el-table-column>
                        <el-table-column prop="contractType" label="Contract Type" width="120" align="center"></el-table-column>
                        <el-table-column prop="year" label="年份" width="80" align="center"></el-table-column>
                        
                        <!-- Actual 月份列 -->
                        <el-table-column label="Actual" align="center">
                            <el-table-column 
                                v-for="month in months" 
                                :key="'actual_' + month" 
                                :prop="'actual_' + month" 
                                :label="month + '月'" 
                                width="80" 
                                align="center"
                                class-name="month-column"
                            >
                                <template slot-scope="scope">
                                    <span class="actual-cell">
                                        {{ scope.row['actual_' + month] || 0 }}
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        
                        <!-- Budget 月份列 -->
                        <el-table-column label="Budget" align="center">
                            <el-table-column 
                                v-for="month in months" 
                                :key="'budget_' + month" 
                                :prop="'budget_' + month" 
                                :label="month + '月'" 
                                width="80" 
                                align="center"
                                class-name="month-column"
                            >
                                <template slot-scope="scope">
                                    <span class="budget-cell">
                                        {{ scope.row['budget_' + month] || 0 }}
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        
                        <!-- 操作列 -->
                        <el-table-column label="操作" width="120" fixed="right" align="center" class-name="action-column">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="editRecord(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" style="color: #f56c6c;" @click="deleteRecord(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                

            </div>
        </div>
        
        <!-- 导入对话框 -->
        <el-dialog title="导入数据" :visible.sync="importDialogVisible" width="600px" :close-on-click-modal="false">
            <div class="upload-area" 
                 @click="triggerFileInput"
                 @dragover.prevent="handleDragOver"
                 @dragleave.prevent="handleDragLeave"
                 @drop.prevent="handleFileDrop"
                 :class="{ dragover: isDragOver }"
            >
                <div class="upload-icon">
                    <i class="el-icon-upload"></i>
                </div>
                <div class="upload-text">
                    点击上传或拖拽文件到此区域
                </div>
                <div class="upload-hint">
                    支持 Excel (.xlsx, .xls) 和 CSV (.csv) 文件，文件大小不超过 10MB<br>
                    文件格式：Location, Division, BU, Department, Function, Profit Center, Cost Center, Category, Category1, Personnel Group, Contract Type, 年份, Actual(1-12月), Budget(1-12月)
                </div>
            </div>
            
            <input 
                type="file" 
                ref="fileInput" 
                style="display: none;" 
                accept=".xlsx,.xls,.csv" 
                @change="handleFileSelect"
            >
            
            <div v-if="uploadProgress > 0" class="progress-info">
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>导入进度</span>
                    <span>{{ uploadProgress }}%</span>
                </div>
                <el-progress :percentage="uploadProgress" :stroke-width="8"></el-progress>
                <div v-if="importResult" style="margin-top: 10px;">
                    <div style="color: #67c23a;">✓ 成功导入 {{ importResult.success }} 条记录</div>
                    <div v-if="importResult.errors > 0" style="color: #f56c6c;">✗ {{ importResult.errors }} 条记录导入失败</div>
                </div>
            </div>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="importDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="startImport" :disabled="!selectedFile || uploading">
                    {{ uploading ? '导入中...' : '开始导入' }}
                </el-button>
            </div>
        </el-dialog>
        
        <!-- 编辑记录对话框 -->
        <el-dialog :title="editMode === 'add' ? '新增记录' : '编辑记录'" :visible.sync="editDialogVisible" width="1200px">
            <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px" size="small">
                <!-- 基础信息 -->
                <el-divider content-position="left">{{ editMode === 'add' ? '基础信息' : '基础信息（只读）' }}</el-divider>
                
                <!-- 新增模式：可编辑的基础信息 -->
                <template v-if="editMode === 'add'">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="Location" prop="location">
                                <el-input v-model="editForm.location"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="Division" prop="division">
                                <el-input v-model="editForm.division"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="BU" prop="bu">
                                <el-input v-model="editForm.bu"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="Department" prop="department">
                                <el-input v-model="editForm.department"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="Function" prop="function">
                                <el-input v-model="editForm.function"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="Profit Center" prop="profitCenter">
                                <el-input v-model="editForm.profitCenter"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="Cost Center" prop="costCenter">
                                <el-input v-model="editForm.costCenter"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="Category" prop="category">
                                <el-input v-model="editForm.category"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="Category1" prop="category1">
                                <el-input v-model="editForm.category1"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="Personnel Group" prop="personelGroup">
                                <el-input v-model="editForm.personelGroup"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="Contract Type" prop="contractType">
                                <el-input v-model="editForm.contractType"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="年份" prop="year">
                                <el-input v-model="editForm.year" placeholder="如：2024"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                
                <!-- 编辑模式：只读的基础信息 -->
                <template v-else>
                    <div style="background-color: #f8f9fa; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div><strong>Location:</strong> {{ editForm.location }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>Division:</strong> {{ editForm.division }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>BU:</strong> {{ editForm.bu }}</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="margin-top: 10px;">
                            <el-col :span="8">
                                <div><strong>Department:</strong> {{ editForm.department }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>Function:</strong> {{ editForm.function }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>Profit Center:</strong> {{ editForm.profitCenter }}</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="margin-top: 10px;">
                            <el-col :span="8">
                                <div><strong>Cost Center:</strong> {{ editForm.costCenter }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>Category:</strong> {{ editForm.category }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>Category1:</strong> {{ editForm.category1 }}</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="margin-top: 10px;">
                            <el-col :span="8">
                                <div><strong>Personnel Group:</strong> {{ editForm.personelGroup }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>Contract Type:</strong> {{ editForm.contractType }}</div>
                            </el-col>
                            <el-col :span="8">
                                <div><strong>年份:</strong> {{ editForm.year }}</div>
                            </el-col>
                        </el-row>
                    </div>
                </template>
                
                <!-- Actual 数据 -->
                <el-divider content-position="left">Actual 数据（可编辑）</el-divider>
                <el-row :gutter="10">
                    <el-col :span="4" v-for="month in months" :key="'actual_' + month">
                        <el-form-item :label="month + '月'">
                            <el-input 
                                v-model="editForm['actual_' + month]" 
                                placeholder="0.00"
                                size="small"
                                style="width: 100%;"
                                @input="validateNumber($event, 'actual_' + month)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <!-- Budget 数据 -->
                <el-divider content-position="left">Budget 数据（可编辑）</el-divider>
                <el-row :gutter="10">
                    <el-col :span="4" v-for="month in months" :key="'budget_' + month">
                        <el-form-item :label="month + '月'">
                            <el-input 
                                v-model="editForm['budget_' + month]" 
                                placeholder="0.00"
                                size="small"
                                style="width: 100%;"
                                @input="validateNumber($event, 'budget_' + month)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveRecord">保存</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入SheetJS用于Excel解析 -->
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    months: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                    tableData: [],
                    filteredTableData: [],
                    tableLoading: false,
                    

                    
                    // 过滤器
                    filters: {
                        location: '',
                        division: '',
                        bu: '',
                        function: '',
                        year: '' // 新增年份过滤器
                    },
                    
                    // 导入相关
                    importDialogVisible: false,
                    selectedFile: null,
                    uploading: false,
                    uploadProgress: 0,
                    importResult: null,
                    isDragOver: false,
                    
                    // 编辑相关
                    editDialogVisible: false,
                    editMode: 'add', // 'add' 或 'edit'
                    editForm: {},
                    editRules: {}
                }
            },
            
            computed: {
                tableHeight() {
                    // 计算表格高度：视窗高度 - 搜索栏高度 - 其他元素高度
                    const searchFiltersHeight = 60; // 搜索过滤区域高度
                    const otherElementsHeight = 20; // 其他元素高度（边框等）
                    return window.innerHeight - searchFiltersHeight - otherElementsHeight;
                },
                
                locationOptions() {
                    return [...new Set(this.tableData.map(row => row.location).filter(Boolean))];
                },
                
                divisionOptions() {
                    return [...new Set(this.tableData.map(row => row.division).filter(Boolean))];
                },
                
                buOptions() {
                    return [...new Set(this.tableData.map(row => row.bu).filter(Boolean))];
                },
                
                functionOptions() {
                    return [...new Set(this.tableData.map(row => row.function).filter(Boolean))];
                },

                yearOptions() {
                    const years = this.tableData.map(row => row.year).filter(Boolean);
                    return [...new Set(years)].sort((a, b) => a - b);
                }
            },
            
            mounted() {
                this.loadData();
                this.applyFilters();
                // 监听窗口大小变化，重新计算表格高度
                window.addEventListener('resize', this.handleResize);
            },
            
            beforeDestroy() {
                window.removeEventListener('resize', this.handleResize);
            },
            
            methods: {
                loadData() {
                    const saved = localStorage.getItem('actualBudgetData');
                    if (saved) {
                        try {
                            this.tableData = JSON.parse(saved);
                        } catch (error) {
                            console.error('加载数据失败:', error);
                            this.tableData = [];
                        }
                    }
                },
                
                saveData() {
                    localStorage.setItem('actualBudgetData', JSON.stringify(this.tableData));
                    localStorage.setItem('actualBudgetDataTimestamp', new Date().toISOString());
                },
                
                applyFilters() {
                    let filtered = [...this.tableData];
                    
                    if (this.filters.location) {
                        filtered = filtered.filter(row => row.location === this.filters.location);
                    }
                    if (this.filters.division) {
                        filtered = filtered.filter(row => row.division === this.filters.division);
                    }
                    if (this.filters.bu) {
                        filtered = filtered.filter(row => row.bu === this.filters.bu);
                    }
                    if (this.filters.function) {
                        filtered = filtered.filter(row => row.function === this.filters.function);
                    }
                    if (this.filters.year) {
                        filtered = filtered.filter(row => row.year === this.filters.year);
                    }
                    
                    this.filteredTableData = filtered;
                },
                
                resetFilters() {
                    this.filters = {
                        location: '',
                        division: '',
                        bu: '',
                        function: '',
                        year: ''
                    };
                    this.applyFilters();
                },
                

                

                
                // 导入相关方法
                showImportDialog() {
                    this.importDialogVisible = true;
                    this.selectedFile = null;
                    this.uploadProgress = 0;
                    this.importResult = null;
                },
                
                triggerFileInput() {
                    this.$refs.fileInput.click();
                },
                
                handleFileSelect(event) {
                    const file = event.target.files[0];
                    if (file) {
                        this.selectedFile = file;
                    }
                },
                
                handleDragOver(e) {
                    this.isDragOver = true;
                },
                
                handleDragLeave(e) {
                    this.isDragOver = false;
                },
                
                handleFileDrop(e) {
                    this.isDragOver = false;
                    const files = e.dataTransfer.files;
                    if (files.length > 0) {
                        this.selectedFile = files[0];
                    }
                },
                
                startImport() {
                    if (!this.selectedFile) {
                        this.$message.warning('请选择要导入的文件');
                        return;
                    }
                    
                    this.uploading = true;
                    this.uploadProgress = 0;
                    
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        try {
                            this.uploadProgress = 30;
                            const data = e.target.result;
                            const workbook = XLSX.read(data, { type: 'binary' });
                            
                            this.uploadProgress = 60;
                            const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                            
                            this.uploadProgress = 90;
                            this.processImportData(jsonData);
                            
                            this.uploadProgress = 100;
                            this.uploading = false;
                            
                        } catch (error) {
                            console.error('文件解析失败:', error);
                            this.$message.error('文件解析失败，请检查文件格式');
                            this.uploading = false;
                        }
                    };
                    
                    reader.readAsBinaryString(this.selectedFile);
                },
                
                processImportData(jsonData) {
                    if (jsonData.length < 2) {
                        this.$message.warning('文件内容为空或格式不正确');
                        return;
                    }
                    
                    const headers = jsonData[0];
                    const rows = jsonData.slice(1);
                    
                    let successCount = 0;
                    let errorCount = 0;
                    
                    const newData = [];
                    
                    rows.forEach(row => {
                        try {
                            const record = {
                                id: Date.now() + Math.random(),
                                location: row[0] || '',
                                division: row[1] || '',
                                bu: row[2] || '',
                                department: row[3] || '',
                                function: row[4] || '',
                                profitCenter: row[5] || '',
                                costCenter: row[6] || '',
                                category: row[7] || '',
                                category1: row[8] || '',
                                personelGroup: row[9] || '',
                                contractType: row[10] || '',
                                year: row[11] || '' // 新增年份数据
                            };
                            
                            // 添加Actual数据 (列12-23)
                            this.months.forEach((month, index) => {
                                record['actual_' + month] = parseFloat(row[12 + index]) || 0;
                            });
                            
                            // 添加Budget数据 (列24-35)
                            this.months.forEach((month, index) => {
                                record['budget_' + month] = parseFloat(row[24 + index]) || 0;
                            });
                            
                            newData.push(record);
                            successCount++;
                        } catch (error) {
                            errorCount++;
                        }
                    });
                    
                    this.tableData = this.tableData.concat(newData);
                    this.saveData();
                    this.applyFilters();
                    
                    this.importResult = {
                        success: successCount,
                        errors: errorCount
                    };
                    
                    this.$message.success(`导入完成！成功 ${successCount} 条，失败 ${errorCount} 条`);
                },
                
                // 编辑相关方法
                
                editRecord(row) {
                    this.editMode = 'edit';
                    this.editForm = { ...row };
                    this.editDialogVisible = true;
                },
                
                saveRecord() {
                    // 转换月份数据为数字格式
                    this.months.forEach(month => {
                        this.editForm['actual_' + month] = parseFloat(this.editForm['actual_' + month]) || 0;
                        this.editForm['budget_' + month] = parseFloat(this.editForm['budget_' + month]) || 0;
                    });
                    
                    this.$refs.editForm.validate((valid) => {
                        if (valid) {
                            if (this.editMode === 'add') {
                                this.editForm.id = Date.now() + Math.random();
                                this.tableData.push({ ...this.editForm });
                                this.$message.success('记录添加成功');
                            } else {
                                const index = this.tableData.findIndex(item => item.id === this.editForm.id);
                                if (index > -1) {
                                    this.tableData.splice(index, 1, { ...this.editForm });
                                    this.$message.success('记录更新成功');
                                }
                            }
                            
                            this.saveData();
                            this.applyFilters();
                            this.editDialogVisible = false;
                        }
                    });
                },
                
                validateNumber(value, field) {
                    // 只允许数字和小数点
                    const numericValue = value.replace(/[^0-9.]/g, '');
                    
                    // 防止多个小数点
                    const parts = numericValue.split('.');
                    if (parts.length > 2) {
                        this.editForm[field] = parts[0] + '.' + parts.slice(1).join('');
                    } else {
                        this.editForm[field] = numericValue;
                    }
                },
                
                deleteRecord(row) {
                    this.$confirm(`确定要删除这条记录吗？`, '确认删除', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const index = this.tableData.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.tableData.splice(index, 1);
                            this.saveData();
                            this.applyFilters();
                            this.$message.success('删除成功');
                        }
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
                },
                
                handleResize() {
                    // 窗口大小变化时强制更新组件以重新计算表格高度
                    this.$forceUpdate();
                },
                

                

            }
        });
    </script>
</body>
</html> 